<%--
  Created by IntelliJ IDEA.
  User: WIzarder
  Date: 2021/8/29
  Time: 17:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入核心标签库--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>

    <title>员工显示页面</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
<%--    web工程里相对路径问题：在客户端/ 代表：http://localhost:8080/
        在服务器端：/代表：http://localhost:8080/工程名
        --%>
    <%--引入boostrap的js和jQuery--%>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="${APP_PATH}/static/js/jquery-3.1.1.js"></script>
    <%--  引入bootstrap的css  --%>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet">
</head>
<body>
<div class="container">
    <%--    标题--%>
    <div class="row">
        <div class="col-md-12 col-md-offset-5">
            <h1>员工CRUD</h1>
        </div>
    </div>
    <%--    删除和添加按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-12">
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button class="btn btn-danger">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
            </button>
        </div>
    </div>
    <%--  用户表格数据  --%>
    <div class="row">
    <table class="table table-hover">
        <tr>
            <th>#</th>
            <th>员工姓名</th>
            <th>员工性别</th>
            <th>员工邮箱</th>
            <th>员工部门</th>
            <th>操作</th>
        </tr>
        <%--   显示用户信息  --%>
        <c:forEach items="${pageInfo.list}" var="emp" >
            <tr>
                <td>${emp.empId}</td>
                <td>${emp.empName}</td>
                <td>${emp.gender == "M" ? "男" : "女"}</td>
                <td>${emp.email}</td>
                <td>${emp.department.deptName}</td>
                <td>
                    <button class="btn btn-info" >
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                    </button>
                    <button class="btn btn btn-danger" >
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                    </button>
                </td>
            </tr>
        </c:forEach>
    </table>
    </div>
    <%--  分页信息  --%>
    <div class="row">
        <%--            分页文字信息--%>
        <div class="col-md-6 col-md-offset-5">
        当前处于第${pageInfo.pageNum}页，总共${pageInfo.pages}页,共${pageInfo.total}条目数
        </div>
        <%--            分页条信息--%>
        <div class="col-md-6 col-md-offset-9">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination pagination-lg">
                    <li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
                    <%--        当页面不是第一页，显示上一页符号          --%>
                    <c:if test="${pageInfo.pageNum != 1}">
                        <li>
                            <a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <%--      显示分页条页码              --%>
                    <c:forEach items="${pageInfo.navigatepageNums}" var="navigatepageNum">
                    <%--       如果当前页码和分页条页码相同就禁用                 --%>
                        <c:if test="${navigatepageNum == pageInfo.pageNum}">
                            <li class="active"><a href="${APP_PATH}/emps?pn=${navigatepageNum}">${navigatepageNum}</a></li>
                        </c:if>
                    <%--       如果当前页码和分页条页码不相同为可用                 --%>
                        <c:if test="${navigatepageNum != pageInfo.pageNum}">
                            <li ><a href="${APP_PATH}/emps?pn=${navigatepageNum}">${navigatepageNum}</a></li>
                        </c:if>

                    </c:forEach>
                    <%--      当页面不是最后一页显示后一页符号              --%>
                    <c:if test="${pageInfo.pageNum != pageInfo.pages}">
                    <li>
                        <a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    </c:if>
                    <li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">尾页</a></li>

                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
